<template>
    <el-form
		ref="form"
		class="plr-1"
		label-position="top"
		label-width="40px"
		:model="form"
		:disabled="saving"
	>
        <el-form-item label="按钮图片">
			<el-upload
				drag
				list-type="picture"
				:headers="{ token }"
				:before-upload="beforeUpload"
				:file-list="[form]"
				:data="fileData"
				:on-progress="uploadProgress"
				:on-error="uploadError"
				:on-success="uploadSuccess"
				:action="`${baseUrl}/index/uposs`"
				accept="image/*"
				:show-file-list="false"
			>
				<i class="el-icon-upload" />
				<div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
			</el-upload>
			<div class="images-item" v-if="form.bg_img">
				<span
					class="el-icon-close remove"
					@click="handleRemove()"
					v-if="form.status != 'uploading'"
				/>
				<div class="images-item__show">
					<el-image
						class="img"
						:src="form.bg_img"
						fit="contain"
						:preview-src-list="previewList"
					/>
					<div class="images-item__show--right">
						<div class="ellipsis">{{ form.name }}</div>
						<el-progress
							v-if="form.status == 'uploading'"
							:stroke-width="2"
							:percentage="form.percentage"
							:format="percentageFormat"
						/>
					</div>
				</div>
			</div>
		</el-form-item>
        <el-form-item prop="formList" label="动态表单">
			<cl-select v-model="form.formList" filterable multiple collapse-tags style="width: 100%">
				<el-option :value="1" label="服务" />
				<el-option :value="2" label="年龄" />
				<el-option :value="3" label="项目" />
				<el-option :value="4" label="性别" />
				<el-option :value="5" label="是否淡斑" />
				<el-option :value="6" label="色斑类型" />
				<el-option :value="7" label="长斑部位" />
				<el-option :value="8" label="预计到店时间" />
			</cl-select>
		</el-form-item>
        <el-form-item prop="mp_query" label="二跳页面参数">
				<div class="tips" style="line-height: normal;">默认不填为当前模板页面参数</div>
				<el-input v-model="form.mp_query" placeholder="请输入二跳页面参数" />
			</el-form-item>
    </el-form>
</template>
<script>
import { baseUrl } from "@/config/env";
import dayjs from "dayjs";
import { mapGetters } from "vuex";

export default {
    props: {
		saving: Boolean,
		view: {
			type: Object,
			default: () => ({})
		},
		config: {
			type: Object,
			default: () => ({})
		},
		adMpList: {
			type: Array,
			default: () => []
		}
	},
    data() {
		return {
			baseUrl,
			form: this.view.options,
            fileData: {},
		};
	},
    computed: {
        ...mapGetters(["token"]),
        previewList() {
			const { img } = this.form;
			return [img];
		},
    },
    methods: {
        beforeUpload(file) {
			this.fileData.name = file.name;
			this.fileData.dirname = "upload/" + dayjs().format("YYYY-MM-DD");
		},
		// 文件上传时
		uploadProgress(evt, file) {
			Object.assign(this.form, {
				...file,
				img: file.url
			});
		},
		// 上传成功
		uploadSuccess(res, file) {
			// Object.assign(this.form, {
			// 	name: file.name,
			// 	status: file.status,
			// 	percentage: file.percentage,
			// 	img: res.data
			// });
			this.form = {
				...this.form,
				name: file.name,
				status: file.status,
				percentage: file.percentage,
				bg_img: res.data
			}

			this.$message.success("上传成功");
			this.view.options = this.form;
		},
		// 上传失败
		uploadError(err) {
			const error = JSON.parse(err.message);
			this.$message.error(error.msg);
		},
    }
}

</script>
<style lang="scss" scoped>
::v-deep {
	.el-upload,
	.el-upload-dragger {
		width: 100%;
	}
	.el-upload-dragger {
		height: 120px;
		.el-icon-upload {
			margin-top: 15px;
		}
	}
}
.images-item {
	border: solid 1px #e0e0e0;
	border-radius: 3px;
	padding: 10px 8px 14px;
	margin: 10px 0;
	position: relative;
	.remove {
		position: absolute;
		right: 10px;
		top: 10px;
		color: grey;
		cursor: pointer;
	}
	&__show {
		display: flex;
		align-items: center;
		.img {
			width: 100px;
			height: 80px;
			border: solid 1px #e0e0e0;
			border-radius: 3px;
		}
		&--right {
			flex: 1;
			overflow: hidden;
			padding-left: 10px;
		}
	}
	::v-deep .el-form-item {
		margin-bottom: 0;
	}
}
</style>